<template>
    <div class="system-exclude-container">
        <div class="table-box">
            <el-table
                ref="tableData"
                :data="tableData"
                tooltip-effect="light"
                border
                :max-height="tableHeight"
                @sort-change="sortChange"
                class="data-table">
                <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="规则名称"
                    sortable="custom"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="info"
                    align="center"
                    label="备注"
                    show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="getData"/>
        </div>
    </div>
</template>

<script>
    import {getExcludeRules} from '@/api/system/exclude-rules'
    import Pagination from '@/components/Pagination'

    export default {
        name: 'index',
        data () {
            return {
                // 表格数据
                tableData: [],
                // 数据总数
                total: 1,
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 10,
                // 表格高度
                tableHeight: 100,
                // 排序方式
                orderBy: '',
                // 排序字段
                sortMap: {},
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            let height = document.documentElement.clientHeight - 153 - 10 - 78 - 5
            this.tableHeight = height > 107 ? height : 107
            this.getData()
        },
        mounted () {
            window.onresize = () => {
                // 213=其他元素高度60+50+48+55 10=距离底部边距 78=分页组件高度 5=适应性调整
                let height = document.documentElement.clientHeight - 153 - 10 - 78 - 5
                this.tableHeight = height > 107 ? height : 107
            }
        },
        methods: {
            /**
             * 获取表格数据
             */
            getData () {
                let params = {
                    OrderBy: '',
                    Index: this.currentPage,
                    PageSize: this.pageSize,
                    Keyword: ''
                }
                if (this.orderBy === 'ascending') {
                    params.OrderBy = 'name asc'
                } else if (this.orderBy === 'descending') {
                    params.OrderBy = 'name desc'
                } else {
                    params.OrderBy = ''
                }
                if (this.getSession(this.$route.name, 'getExcludeRules') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getExcludeRules')
                    if (res.code.toString() === '200') {
                        this.tableData = res.data.rows
                        this.total = res.data.total
                    }
                } else {
                    getExcludeRules(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getExcludeRules: res})
                        if (res.code.toString() === '200') {
                            this.tableData = res.data.rows
                            this.total = res.data.total
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.tableData = []
                this.orderBy = colData.order
                this.currentPage = 1
                this.getData()
            }
        },
        components: {
            Pagination
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style lang="scss" scoped>
    .system-exclude-container {
        margin-top: 10px;
        .table-box {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            height: calc(100vh - 132px);
            .add-btn {
                margin-bottom: 10px;
            }
        }
        /deep/.el-dialog {
            width: 800px!important;
            .el-dialog__body {
                padding: 10px;
                .dialog-form {
                    width: 90%;
                    margin: 0 auto;
                }
            }
            .el-dialog__footer {
                text-align: right;
            }
        }
    }
</style>
